<template>
	<view class="content">
		<tn-swiper :list="bg_img" mode="number" indicatorPosition="bottomRight" :height="400"></tn-swiper>
		<view class="box" :class="show ? 'fade-in' : 'fade-out'">
			<view class="user tn-flex tn-flex-col-center">
				<view class="left">
					<image :src="user.avatar" mode="" class="avatar"></image>
<!-- 					<image :src="gift_bag2" mode="" class="touxiangkuang" v-if="gift_bag2"></image> -->
				</view>
				<view class="center">
					<view class="top tn-flex tn-flex-col-center">
						<text class="name">{{user.nickname}}</text>
						<view class="tagList tn-flex">
							<!-- 男 -->
							<view class="tag nan" v-if="user.sex == 1">
								<image src="/static/index/nan.png" class="img1" mode=""></image>
								<text>{{user.age}}</text>
							</view>
							<view class="tag nv" v-if="user.sex == 2">
								<image src="/static/index/nv.png" class="img2" mode=""></image>
								<text>{{user.age}}</text>
							</view>
						</view>
					</view>
					<view class="bottom tn-flex tn-flex-col-center tn-flex-row-between">
						<!-- <view class="game-type tn-flex tn-flex-col-center">
							<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/wzry.png" mode=""></image>
							<text class="t1">王者荣耀</text>
							<text class="t2">技术陪玩官</text>
						</view> -->
						<view class="tag-list" v-if="user_id">
							<!-- is_follow -->
							<view class="tn-flex tn-flex-direction-column tn-flex-col-center" v-if="user.is_follow"
								@click="followUser">
								<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/g11.png" class="img1"
									mode=""></image>
								<text class="tag-tex">已关注</text>
							</view>
							<view class="tn-flex tn-flex-direction-column tn-flex-col-center" @click="followUser"
								v-else>
								<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/g1.png" class="img1"
									mode=""></image>
								<text class="tag-tex">关注</text>
							</view>

							<view class="tn-flex tn-flex-direction-column tn-flex-col-center" @click="sendmsg">
								<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/g2.png" class="img2"
									mode=""></image>
								<text class="tag-tex">联系TA</text>
							</view>
							<view class="tn-flex tn-flex-direction-column tn-flex-col-center" @click="blockClick">
								<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/g3.png" class="img3"
									mode=""></image>
								<text class="tag-tex">黑名单</text>
							</view>
							<view @click="goReport" class="tn-flex tn-flex-direction-column tn-flex-col-center">
								<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/g4.png" class="img4"
									mode=""></image>
								<text class="tag-tex">举报</text>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="right tn-flex tn-flex-direction-column tn-flex-col-center">
					<image src="/static/index/focus1.png" mode=""></image>
					<view class="t1">已关注</view>
				</view> -->
			</view>
			<!-- tab切换 -->
			<view class="navTab">
				<block v-for="(item,index) in scrollList" :key="index">
					<view class="tab-item" :class="{'at-tab-item':current == index}" @click="tabChange(index)">
						{{item.name}}
					</view>
				</block>
				<view class="tab-bottom" :style="[{left:left+'px'},{width:width+'px'}]">
					<view class="xian" :style="{width:width/5+'px'}"></view>
				</view>
			</view>
			<!-- 资料 -->
			<view class="datum" v-show="current == 0">
				<view class="title">个人简介</view>
				<view class="datum-content border-bom">
					{{user.dec}}
				</view>
				<!-- <view class="guard-title tn-flex tn-flex-col-center"
					@click="navigateToFn({ url: '/circlePages/keep_user?num='+1+'&id='+user_id, checkLogin: false })">
					<view class="title">守护({{user.keeperCount}}人)</view>
					<view class="ftitle" v-if="user.keeperCount == 0">来做守护我的第一个吧！</view>
					<view class="ftitle" v-else></view>
					<text class="tn-icon-right"></text>
				</view> -->
				<!-- <view class="guard-list tn-flex tn-flex-wrap border-bom">
					<block v-for="(item,index) in keeperList" :key="index">
						<view class="list-item">
							<image :src="item.avatar" mode=""></image>
							<view class="list-item-name">{{item.nickname}}</view>
						</view>
					</block>
					<view class="list-item" @click="shouhuxiu = true">
						<image src="https://web.lanmei.co/image/add.png" mode=""></image>
						<view class="list-item-name">守护TA</view>
					</view>
				</view> -->
				<!-- <view class="guard-title tn-flex tn-flex-col-center tn-flex-row-between" v-if="giftlog.length != 0">
					<view class="title">收到的礼物({{user.giftCount}}人)</view>
					<text class="tn-icon-right"></text>
				</view>
				<view class="gift-list tn-flex tn-flex-wrap">
					<block v-for="(item,index) in giftlog" :key="index">
						<view class="list-item">
							<image :src="item.image" mode=""></image>
							<view class="list-item-name">{{item.title}}</view>
							<view class="list-item-num">x{{item.gift_num}}</view>
						</view>
					</block>
				</view> -->
			</view>
			<!-- 服务 -->
			<view class="service" v-show="current == 1">
				<!-- v-if="mShow" -->
				<manito-list :list="pList"></manito-list>
			</view>
			<!-- 评价 -->
			<view class="pingjia" v-show="current == 2">
				<view class="evaluate">
					<view class="title">用户评价</view>
					<block v-for="(item,index) in pEList" :key="index">
						<view class="p-list">
							<view class="p-user tn-flex tn-flex-col-center">
								<image :src="item.avatar" mode=""></image>
								<text class="name">{{item.nickname}}</text>
								<view class="p-score tn-flex tn-flex-row-right">
									<tn-rate v-model="item.score" :count="count" activeColor="#AB74FF"
										:disabled="true"></tn-rate>
								</view>
							</view>
							<view class="p-center">{{item.content}}</view>
						</view>
					</block>
					<w-load-more ref="wLoadMore"></w-load-more>
				</view>
			</view>

			<!-- 动态 -->
			<view class="dynamic" v-show="current == 3">
				<block v-for="(item,index) in gList" :key="index">
					<topic-list :item="item" :isIndex="index" :isPlay="activeIndex == index"
						@audioPlay="audioPlay"></topic-list>
				</block>
				<w-load-more ref="wLoadMore1"></w-load-more>
			</view>





		</view>
		<!-- 守护 -->
		<tn-popup v-model="shouhuxiu" mode="bottom">
			<view class="guardPop">
				<view class="user tn-flex tn-flex-row-center tn-flex-direction-column tn-flex-col-center">
					<image :src="user.avatar" mode=""></image>
					<text class="name">{{user.nickname}}</text>
				</view>

				<view class="price-list tn-flex tn-flex-row-between">
					<block v-for="(item,index) in keepPrice" :key="index">
						<view class="list-item tn-flex tn-flex-direction-column tn-flex-row-center tn-flex-col-center"
							:class="{'pitch-bg':priceIndex == index}" @click="rechargeChange(index)">
							<text class="time">{{index}}个月</text>
							<text class="price">海豚币{{item}}</text>
						</view>
					</block>
				</view>
				<view class="btn" @click="open">立即开通</view>
			</view>
		</tn-popup>
		<modal ref="modal" rightTex="去充值" @cancel="cancel" @confirm="confirm"></modal>
		<!-- 开通成功 -->
		<tn-popup v-model="sPop" mode="center">
			<view class="sPop">
				<image src="https://peiwanblogs.huolieniaowangluo.com/wx-image/wfw/gongxiIcon.png" mode=""></image>

				<view class="tex-kuai">成功守护TA{{priceIndex}}个月</view>
			</view>
		</tn-popup>
	</view>
</template>
<script>
	const audioContext = uni.createInnerAudioContext()
	export default {
		data() {
			return {
				bg_img: [],
				count: 5,
				value: 2,
				scrollList: [{
						name: '资料'
					},
					{
						name: '服务',
					},
					{
						name: '评价'
					},
					// {
					// 	name: '动态'
					// }
				],
				current: 0,
				left: 0,
				width: 0,
				itemNode: '',
				shouhuxiu: false,
				priceIndex: '3',
				sPop: false,
				user_id: '',
				user: '',
				show: false,
				keeperList: [],
				giftlog: [],
				keepPrice: [],
				fuanList: [],
				pList: [],
				page: 1,
				pEList: [],
				mShow: false,
				page1: 1,
				gList: [],
				activeIndex: -1,
				type: 0,
				gift_bag2: '',
				miniapp_switch: 0
			}
		},
		onReady() {
			setTimeout(() => {
				const query = uni.createSelectorQuery().in(this);
				query.selectAll('.tab-item').boundingClientRect(data => {
					this.itemNode = data
					this.width = data[this.current].width
				}).exec();
			}, 500)
			audioContext.onEnded(res => {
				console.log('结束了')
				this.activeIndex = -1
			})

		},
		onLoad(option) {
			this.user_id = option.id
			this.type = option.type
			this.getUser(1)
			this.playGoodsList()
			this.playEvaList()
			this.getGoodslist()
			this.GetConfig()
		},
		onReachBottom() {
			if (this.current == 2) {
				if (this.pEList.length < 20) return
				this.page++
				this.$refs['wLoadMore'].setLoading()
				this.playEvaList()
			}
			if (this.current == 3) {
				if (this.gList.length < 20) return
				this.page1++
				this.$refs['wLoadMore1'].setLoading()
				this.getGoodslist()
			}
		},
		methods: {
			async GetConfig() {
				let res = await this.$request({
					method: 'post',
					url: '/api/index/GetConfig'
				})
				console.log(res.data.data.miniapp_switch, 'miniapp_switchminiapp_switch')
				this.miniapp_switch = res.data.data.miniapp_switch
				if (this.miniapp_switch == 1) {
					this.scrollList[3] = {
						name: '动态'
					}
				}
			},
			async getUser(loading) {
				try {
					let result = await this.$request({
						loading,
						method: 'post',
						url: '/api/index/GetUser',
						data: {
							user_id: this.user_id
						}
					})
					let userinfo = result.data.data.userinfo
					this.user = userinfo
					this.bg_img = [userinfo.bg_img]

					this.keeperList = userinfo.keeper.data
					this.giftlog = userinfo.giftlog
					this.keepPrice = userinfo.keep_price

					if (userinfo.gift_bag2) {
						this.gift_bag2 = userinfo.gift_bag2.gift_image
					}


					this.show = true
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 播放音频事件监听
			audioPlay(index) {
				if (this.activeIndex == index) {
					this.activeIndex = -1
					audioContext.pause()
				} else {
					this.activeIndex = index
					audioContext.src = this.gList[index].voc
					audioContext.play()
				}

			},
			// 服务列表
			async playGoodsList() {
				try {
					let result = await this.$request({
						loading: 0,
						method: 'post',
						url: '/api/play/play_goods_list',
						data: {
							user_id: this.user_id
						}
					})

					this.pList = result.data.data
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 评价列表
			async playEvaList() {
				try {
					let result = await this.$request({
						loading: 0,
						method: 'post',
						url: '/api/play/play_eva_list',
						data: {
							user_id: this.user_id,
							page: this.page
						}
					})
					let data = result.data.data.data
					if (this.page == 1) {
						this.pEList = data
					} else {
						this.pEList = this.pEList.concat(data)
						this.$refs['wLoadMore'].setNomore()
						if (data.length == 0) {
							this.page--
						}
					}
				} catch (e) {
					//TODO handle the exception
				}
			},
			// 动态列表
			async getGoodslist() {
				try {
					let result = await this.$request({
						loading: 0,
						method: 'post',
						url: this.type != 1 ? '/api/index/getGoodslist' : '/api/user/myGoodsList',
						data: {
							to_id: this.user_id,
							page: this.page1
						}
					})
					console.log(result)
					let data = result.data.data.data
					if (this.page1 == 1) {
						this.gList = data
					} else {
						this.gList = this.gList.concat(data)
						this.$refs['wLoadMore1'].setNomore()
						if (data.length == 0) {
							this.page1--
						}
					}

				} catch (e) {
					//TODO handle the exception
				}
			},

			// 关注
			async followUser() {
				try {
					let result = await this.$request({
						loading: 0,
						method: 'get',
						url: '/api/user/followUser',
						data: {
							user_id: this.user_id
						}
					})
					this.user.is_follow = this.user.is_follow ? false : true
				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			// 拉黑
			async blockClick() {
				try {
					let result = await this.$request({
						loading: 0,
						method: 'get',
						url: '/api/play/play_block',
						data: {
							to_user_id: this.user_id
						}
					})
					this.msg(result.data.msg)
					setTimeout(() => {
						uni.reLaunch({
							url: "/pages/index"
						})
					}, 800)

				} catch (e) {
					this.msg(e.data.msg)
				}
			},
			// 选择守护时间
			rechargeChange(index) {
				this.priceIndex = index
			},
			tabChange(index) {
				this.current = index
				this.left = this.itemNode[index].left
				// if(index == 1){
				// 	setTimeout(() =>{
				// 		this.mShow = true
				// 	},300)
				// }else{
				// 	this.mShow = false
				// }
			},
			async open() {
				try {
					let result = await this.$request({
						loading: 0,
						method: 'post',
						url: '/api/gift/doKeeper',
						data: {
							user_id: this.user_id,
							type: this.priceIndex
						}
					})
					this.shouhuxiu = false
					this.sPop = true
					this.getUser(0)
				} catch (e) {
					this.$refs.modal.open()
					//TODO handle the exception
				}

			},
			cancel() {
				this.$refs.modal.close()
			},
			// 余额不足 去充值
			confirm() {
				uni.navigateTo({
					url: '/minePages/gift/chongzhi',
					success: () => {
						this.$refs.modal.close()
					}
				})

			},
			goReport() {
				uni.navigateTo({
					url: `/circlePages/report?id=${this.user_id}&type=${1}`
				})
			},
			sendmsg() {
				if (this.user.id == uni.getStorageSync('user_id')) {
					this.msg('自己不能撩自己')
					return
				}
				this.navigateToFn({
					url: '/minePages/chat/talk?toid=' + this.user.id + '&toname=' + this.user.nickname,
					checkLogin: true
				})

			},
		}
	}
</script>
<style lang="scss" scoped>
	.content {
		.box {
			.user {
				padding: 0 30rpx;
				height: 216rpx;
				box-sizing: border-box;

				.left {
					position: relative;
				}

				.touxiangkuang {
					width: 220rpx;
					height: 220rpx;
					position: absolute;
					top: -40rpx;
					left: -40rpx;
				}

				.avatar {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
				}

				.audio {
					height: 32rpx;
					position: absolute;
					bottom: 0;
					left: 30rpx;
					right: 30rpx;
					background: linear-gradient(90deg, #F783C3 0%, #A66FF7 100%);
					border-radius: 16rpx;

					.play {
						width: 22rpx;
						height: 22rpx;
					}

					.seconds {
						font-size: 20rpx;
						font-weight: 400;
						color: #FFFFFF;
						margin-left: 5rpx;
					}
				}

				.center {
					flex: 1;
					padding-left: 24rpx;

					.top {
						margin-bottom: 26rpx;

						.name {
							font-size: 32rpx;
							font-weight: bold;
							color: $uni-text-color;
						}

						.state {
							.dian {
								width: 8rpx;
								height: 8rpx;
								border-radius: 50%;
								margin-right: 4rpx;
							}

							.text {
								font-size: 20rpx;
								font-weight: 400;
							}
						}

						.off-line {
							.dian {
								background: #999999;
							}

							.text {
                color: #979393;
							}
						}

						.tagList {
							margin-left: 16rpx;

							.tag {
								height: 34rpx;
								border-radius: 6rpx;
								font-size: 22rpx;
								font-weight: 400;
								color: #FFFFFF;
								padding: 0 8rpx;
								line-height: 34rpx;
								margin-right: 10rpx;

								.img1 {
									width: 16rpx;
									height: 16rpx;
									margin-right: 6rpx;
								}

								.img2 {
									width: 14rpx;
									height: 18rpx;
									margin-right: 6rpx;
								}
							}

							.nan {
								background: #69B7FD;
							}

							.nv {
								background-color: #FF91CF;
							}

							.tag-bg {
								background: linear-gradient(180deg, #E2A2B5 0%, #F677B3 100%);
								border-radius: 6rpx;
							}
						}
					}

					.bottom {
						.tag-list {
							display: flex;

							view {
								margin-right: 48rpx;
							}

							.img1 {
								width: 36rpx;
								height: 31rpx;
							}

							.img2 {
								width: 31rpx;
								height: 31rpx;
							}

							.img3 {
								width: 27rpx;
								height: 31rpx;
							}

							.img4 {
								width: 32rpx;
								height: 30rpx;
							}

							.tag-tex {
								font-size: 22rpx;
								font-weight: 500;
								color: #333333;
								margin-top: 8rpx;
							}
						}

						// .game-type {
						// 	height: 40rpx;
						// 	background: linear-gradient(90deg, #654798 0%, #211C3A 100%);
						// 	border-radius: 21rpx;
						// 	width: fit-content;
						// 	padding-left: 8rpx;
						// 	padding-right: 20rpx;

						// 	image {
						// 		width: 30rpx;
						// 		height: 30rpx;
						// 		border-radius: 50%;
						// 	}

						// 	.t1 {
						// 		font-size: 22rpx;
						// 		font-weight: 400;
						// 		color: #FFFFFF;
						// 		margin-left: 6rpx;
						// 		margin-right: 20rpx;
						// 	}

						// 	.t2 {
						// 		font-size: 22rpx;
						// 		font-weight: 400;
						// 		color: #E2B9FB;
						// 	}
						// }
					}
				}

				.right {
					width: 80rpx;

					image {
						width: 48rpx;
						height: 44rpx;
					}

					.t1 {
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
						margin-top: 12rpx;
					}
				}
			}

			.navTab {
				display: flex;
				align-items: center;
				height: 88rpx;
				position: relative;

				.tab-item {
					width: 150rpx;
					text-align: center;
					font-size: 32rpx;
					font-weight: 400;
					color: #333333;
					// margin-right: 56rpx;
				}

				.at-tab-item {
					font-size: 36rpx;
					font-weight: bold;
					color: $uni-text-color;

				}

				.tab-bottom {
					position: absolute;
					bottom: 0;
					transition: left .2s linear;
					display: flex;
					justify-content: center;

					.xian {
						height: 8rpx;
            background: linear-gradient(90deg, #080808 0%, #080808 100%);
						border-radius: 60rpx;
					}
				}
			}

			// 资料
			.datum {
				background-color: #fff;
				border-radius: 20rpx;
				margin: 30rpx;
				padding: 24rpx 24rpx 8rpx 24rpx;

				.title {
					font-size: 30rpx;
					font-weight: 400;
					color: #333333;
				}

				.border-bom {
					border-bottom: 1px solid #efefef;
          color: #333333ad;
				}

				&-content {
					font-size: 26rpx;
					font-weight: 400;
					color: #CCCCCC;
					padding: 16rpx 0 32rpx 0;
				}

				.guard-title {
					margin-top: 32rpx;

					.ftitle {
						flex: 1;
						font-size: 22rpx;
						font-weight: 400;
						color: #333333ad;
						align-self: flex-end;
						margin-left: 16rpx;
					}

					.tn-icon-right {
						color: #333333ad;
					}
				}

				.guard-list {
					padding: 24rpx 0 8rpx 0;

					.list-item {
						margin-right: 24rpx;
						margin-bottom: 24rpx;


						image {
							width: 88rpx;
							height: 88rpx;
						}

						&-name {
							font-size: 24rpx;
							font-weight: 400;
							color: #333333;
							text-align: center;
							margin-top: 12rpx;
						}
					}
				}

				.gift-list {
					margin-top: 32rpx;

					.list-item {
						margin-right: 24rpx;
						text-align: center;
						margin-bottom: 24rpx;

						image {
							width: 110rpx;
							height: 110rpx;
							border-radius: 10rpx;
						}

						&-name {
							font-size: 26rpx;
							font-weight: 400;
							color: #333333;
							text-align: center;
							margin-top: 24rpx;
						}

						&-num {
							font-size: 26rpx;
							font-weight: 400;
							color: #333333ad;
							text-align: center;
							margin-top: 8rpx;
						}
					}
				}


			}

			.service {
				padding: 42rpx 30rpx 0 30rpx;
			}

			.pingjia {

				margin: 30rpx;
			}

			.dynamic {
				padding: 30rpx 30rpx 0 30rpx;
			}





			.score {
				height: 249rpx;

				.left {
					text-align: center;

					.num {
						font-size: 64rpx;
						font-weight: bold;
						color: #FE8ECE;
					}

					.label {
						font-size: 28rpx;
						font-weight: 500;
						color: #FFFFFF;
						margin-top: 14rpx;
					}
				}

				.right {
					margin-left: 49rpx;

					.r-li {
						.label {
							font-size: 26rpx;
							font-weight: 500;
							color: #FFFFFF;
						}
					}

					.r-li-mar {
						margin: 32rpx 0;
					}
				}
			}

			.evaluate {
				background-color: #ffffff;
				border-radius: 20rpx;
				padding: 0 30rpx 1rpx 30rpx;

				.title {
					font-size: 30rpx;
					font-weight: 500;
					color: #333333;
					margin-bottom: 24rpx;
					padding-top: 32rpx;
				}

				.p-list {
					margin-bottom: 40rpx;

					.p-user {
						image {
							width: 56rpx;
							height: 56rpx;
							border-radius: 50%;
						}

						.name {
							font-size: 26rpx;
							font-weight: bold;
							color: #999999;
							margin-left: 14rpx;
						}

						.p-score {
							flex: 1;
						}
					}

					.p-center {
						font-size: 24rpx;
						font-weight: 500;
						color: #FFFFFF;
						margin-top: 20rpx;
					}
				}
			}
		}

		.foot {
			position: fixed;
			bottom: 0;
			left: 0;
			right: 0;
			height: 140rpx;
			background: #211C37;

			.foot-tag {
				image {
					width: 40rpx;
					height: 40rpx;
				}

				.t1 {
					font-size: 28rpx;
					font-weight: 400;
					color: #EEEEEE;
					margin-top: 12rpx;
				}
			}

			.btn {
				width: 434rpx;
				height: 74rpx;
        background: linear-gradient(90deg, #080808 0%, #080808 100%);
				border-radius: 37rpx;
				font-size: 28rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 74rpx;
			}
		}

		.guardPop {
			background-color: #ffffff;
			padding: 0 30rpx 56rpx 30rpx;

			.user {
				height: 274rpx;

				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
				}

				.name {
					font-size: 30rpx;
					font-weight: 400;
					color: #FFFFFF;
					margin-top: 8rpx;
				}
			}

			.price-list {

				.list-item {
					width: 180rpx;
					height: 160rpx;
					background-color: #666666;
					border-radius: 12rpx;

					.time {
						font-size: 32rpx;
						font-weight: bold;
						color: #FFFFFF;
					}

					.price {
						font-size: 28rpx;
						font-weight: 400;
						color: #FFFFFF;
						margin-top: 12rpx;
					}
				}

				.pitch-bg {
					background-color: #9D5EF4;
				}
			}

			.btn {
				height: 88rpx;
        background: linear-gradient(180deg, #DB89F5 0%, #834BF4 100%);
				border-radius: 44rpx;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				text-align: center;
				line-height: 88rpx;
				margin-top: 48rpx;
			}
		}

		/deep/.tn-popup__content__center_box {
			background-color: transparent;
		}

		/deep/.uni-scroll-view {
			overflow: initial !important;
		}

		.sPop {
			position: relative;
			height: 300rpx;
			display: flex;

			.tex-kuai {
				width: 520rpx;
				height: 179rpx;
				line-height: 230rpx;
				background: #211C3A;
				border-radius: 12rpx;
				text-align: center;
				font-size: 32rpx;
				font-weight: 400;
				color: #FFFFFF;
				align-self: flex-end;
			}

			image {
				width: 324rpx;
				height: 179rpx;
				position: absolute;
				left: 50%;
				top: 0;
				transform: translateX(-50%);
			}
		}
	}
</style>
